<!-- 滚动列表 -->
<template>
	<div class="scroll-list" @mouseenter="cancelScroll" @mouseleave="setScroll">
		<div
			v-for="item of defaults.data"
			:key="item.id"
			:style="scrollTop"
			class="item"
			@click="handleClick(item)"
		>
			{{ item.name }} - {{ item.comment }}
		</div>
	</div>
</template>

<script>
import { setInterval, clearInterval } from 'timers'
export default {
  name: 'ScrollList',

  components: {},

  props: {
    options: {
      type: Object,
      default: () => {},
    },
  },

  data () {
    return {
      // 默认配置
      defaults: {
        data: [
          {
            id: 1,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 2,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 3,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 4,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 5,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 6,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 7,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 8,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 9,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
          {
            id: 10,
            avatar: '',
            name: '小王',
            comment: '团结互助，上课积极',
            teacher: '唐老师 (英语)',
            time: '1562749045257',
          },
        ],
      },
      dataLen: 0, // data数据长度
      scrollIndex: 0, // 当前滚动值
      direction: 'down', // 滚动方向
      scrollTimer: null, // 滚动定时器
    }
  },

  computed: {
    scrollTop () {
      return `top: -${this.scrollIndex * 30}px`
    },
  },

  watch: {},

  created () {
    Object.assign(this.defaults, this.options)
    this.dataLen = this.defaults.data.length
    this.setScroll()
  },

  mounted () {},

  methods: {
    /* 定时滚动 */
    setScroll () {
      this.scrollTimer = setInterval(this.scrollBehavior, 2000)
    },
    /* 取消滚动 */
    cancelScroll () {
      clearInterval(this.scrollTimer)
    },
    /* 滚动逻辑 */
    scrollBehavior () {
      if (this.direction === 'up') {
        if (this.scrollIndex < this.dataLen - 4) this.scrollIndex++
        else this.direction = 'down'
      } else if (this.direction === 'down') {
        if (this.scrollIndex > 0) this.scrollIndex--
        else this.direction = 'up'
      }
    },
    /* 列表项点击事件 */
    handleClick (item) {
      this.$emit('on-click', item)
    },
  },
}
</script>

<style lang='less' scoped>
.scroll-list {
	height: 120px;
	overflow: hidden;
	.item {
		position: relative;
		height: 30px;
		line-height: 30px;
		background-color: antiquewhite;
		transition: top 0.5s ease-in;
	}
}
</style>
